
<template>
    <div class="menuIframeContainer">
        
        <mt-header title="小老弟点餐系统" id="mainHead">
            <a @click = "back()" slot="left">
                <mt-button icon="back">返回</mt-button>
            </a>
        </mt-header>

		<div class="mainContext_out" ref="mainContext_out">

			

			 <transition name="menuAnimat">
				 <keep-alive >
				<router-view class="mainContext"  v-if="$route.meta.keepAlive_two"></router-view>
				 </keep-alive>
			</transition> 

			<transition name="menuAnimat">
				<router-view class="mainContext"  v-if="!$route.meta.keepAlive_two"></router-view>
			</transition>

		</div>

        <nav class="mui-bar mui-bar-tab" id="navFoot">

			<router-link to="/main/home" class="mui-tab-item " tag="a">
				<span class="mui-icon iconfont icon-zhuye"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>

			<router-link to="/main/business" class="mui-tab-item" tag="a">
				<span class="mui-icon iconfont icon-shangjia"></span>
				<span class="mui-tab-label">商家</span>
			</router-link>

			<router-link to="/main/order" class="mui-tab-item " tag="a">
				<span class="mui-icon iconfont icon-dingdan"></span>
				<span class="mui-tab-label">订单</span>
			</router-link>

			<router-link to="/main/user" class="mui-tab-item " tag="a">
				<span class="mui-icon iconfont icon-xiazai"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
		</nav>

    </div>

</template>


<script>
export default {

	methods:{
		back(){
			this.$router.go(-1);
		}
	},
	mounted() {
	},
    
}
</script>



<style scoped>

    #navFoot{
        background-color: #fdfdfd;
		
    }

	.menuAnimat-enter-active,.menuAnimat-leave-active{
		transition: all .5s ease;
		position: fixed;	
	}


	.menuAnimat-enter{
		transform: translateX(100%);
		width: 100%;
	}


	.menuAnimat-leave-to{
		transform: translateX(-100%);
		width: 100%;
	}

	

	.menuIframeContainer{
		height: 100%;
	}
    

</style>

<style lang="less" scoped>
	.mainContext_out{
		width: 100%;
		height: calc(~"100% - 40px");
		padding: 1vw;
		overflow: auto;
	}

</style>


<style>
    #mainHead h1{
        font-size: 18px;
        font-weight: bold;
    }




</style>

